let site = 'auto_ip'
let colors = ['#4B66C7', '#44D798', '#9A4CFB', '#E76D59', '#F7AC1A']

let liList =  $('.data-list ul li')
let liListLast =  $('.weather-right-box div .data-list li:nth-child(2) ul li')
$.get(`https://free-api.heweather.com/s6/weather?location=${site}&key=7e3165d6346740daa12a7b8fcfac97fd`, function (result,status) {
    let basic = result.HeWeather6[0];
    let today = basic.daily_forecast[0];
    let city = basic.basic.parent_city
    let weather, tmp;
    if (today.cond_txt_d == today.cond_txt_n) {
        weather = today.cond_txt_d;
    } else {
        weather = today.cond_txt_d + "转" + today.cond_txt_n
    };
    tmp = basic.now.tmp + '°C';
    $('.today-specific .real-time i img').attr('src', `https://cdn.heweather.com/cond_icon/${today.cond_code_d}.png`)
    $('.today-specific .real-time div p').text(weather)
    $('.today-specific .real-time div h3').text(tmp)
    //风力风向
    $('#wind').text(`${basic.daily_forecast[0].wind_dir + basic.daily_forecast[0].wind_sc}级`)
    //降水量
    $("#precipitation").text(`${basic.daily_forecast[0].pcpn}mm`)
    //湿度
    $("#humidity").text(`${basic.daily_forecast[0].hum}%`)
    //大气压强
    $("#atmospheric").text(`${basic.daily_forecast[0].pres}hpa`)
    // 白天和晚上天气详情
    $('.today-box > ul li.day-list i img').attr('src', `https://cdn.heweather.com/cond_icon/${today.cond_code_d}.png`)
    $('.today-box > ul li.day-list div .cond').text(today.cond_txt_d);
    $('.today-box > ul li.day-list div .tmp').text(today.tmp_max + "℃");
    $('.today-box > ul li.day-list div .wind').text(`${today.wind_dir + today.wind_sc}级`);
    $('.today-box > ul li.day-list div .sunrise').text(today.sr);

    $('.today-box > ul li.night-list i img').attr('src', `https://cdn.heweather.com/cond_icon/${today.cond_code_n}.png`)
    $('.today-box > ul li.night-list div .cond').text(today.cond_txt_n);
    $('.today-box > ul li.night-list div .tmp').text(today.tmp_min + "℃");
    $('.today-box > ul li.night-list div .wind').text(`${today.wind_dir + today.wind_sc}级`);
    $('.today-box > ul li.night-list div .sunrise').text(today.ss);
    // 24小时天气
    $('.left-down .weather-list li .weather-span').text(weather)
    $('.left-down .weather-list li i img').attr('src', `https://cdn.heweather.com/cond_icon/${today.cond_code_d}.png`)
    //最近7天的天气
    for(let i=0;i<liList.length;i++){
        let n = i%3
        let weatherDetails ;
        if(basic.daily_forecast[n].cond_txt_d == basic.daily_forecast[n].cond_txt_n){
            weatherDetails = basic.daily_forecast[n].cond_txt_d
        }else{
            weatherDetails = basic.daily_forecast[n].cond_txt_d + "转" +basic.daily_forecast[n].cond_txt_n
        }
        liList.eq(i).children('.weather-span').text(weatherDetails)
        liList.eq(i).children('.day-img').children('img').attr('src', `https://cdn.heweather.com/cond_icon/${basic.daily_forecast[n].cond_code_d}.png`)
        liList.eq(i).children('.night-img').children('img').attr('src', `https://cdn.heweather.com/cond_icon/${basic.daily_forecast[n].cond_code_n}.png`)
        liList.eq(i).children('.tmp-span').text(`${basic.daily_forecast[n].tmp_max}℃/${basic.daily_forecast[n].tmp_min}℃`)
        liList.eq(i).children('.wind-direction').text(basic.daily_forecast[n].wind_dir)
        liList.eq(i).children('.wind-power').text(basic.daily_forecast[n].wind_sc + "级")
    }
})
$.get(`https://free-api.heweather.net/s6/air/now?location=${site}&key=7e3165d6346740daa12a7b8fcfac97fd`, function (result) {
    let air = result.HeWeather6[0];
    // 空气质量
    $('#airQuality').text(air.air_now_city.qlty)
})

// 日期
function GetDateStr(AddDayCount) {
    var dd = new Date();
    dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
    var y = dd.getFullYear();
    var m = dd.getMonth() + 1; //获取当前月份的日期
    var d = dd.getDate();
    return  d + "日";
}
function GetWeeksStr(AddDayCount) {
    var dd = new Date();
    dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
    var dayCycle = dd.getDay();
    var dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
    for (var i = 0; i < 7; i++) {
        if (dayCycle == i) {
            //将dayCycleArray的数赋值到系统星期几里面中去;
            dayCycle = dayCycleArray[i];
        }
    }
    return '周' + dayCycle
}
for(let i=0;i<liList.length;i++){
    liList.eq(i).children('p').text(GetDateStr(i) + "(" + GetWeeksStr(i) + ")")

}


// 1-7 和 8-15天切换
$('.date-list li').click(function(){
    $(this).addClass('active').siblings().removeClass('active')
    let _index = $(this).index()
    if(_index === 1){
        console.log(1.1)
        $('.data-list > li').addClass('active')
    }else{
        console.log(1.2)
        $('.data-list > li').removeClass('active')
    }
})


function buildChart1() {
    var myChart = echarts.init(document.getElementById('tmpLine'));
    option = {

        grid: {
            top: '12%',
            left: '1%',
            right: '1%',
            bottom: '26%',
            // containLabel: true
        },
        xAxis: [{
            show:true,
            type: 'category',
            axisTick: {show: false},
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {textStyle: {color: '#fff',lineHeight: 3,fontSize:'10'}},
            data: [ '东北风 2级', '东北风 2级', '东北风 2级', '东北风 2级', '东北风 2级', '东北风 2级', '东北风 2级', '东北风 2级', '东北风 2级', '东北风 2级' ,'东北风 2级', '东北风 2级'],
        }],
        yAxis: [{
            show:false
        }],
        series: [{
            name: '注册总量',
            type: 'line',
            // smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbolSize: 8,
            lineStyle: {
                normal: {
                    color: "#f29961", // 线条颜色
                },

            },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#fff',
                }
            },
            itemStyle: {
                normal: {
                    color: "rgba(255,255,255,.1)",
                }
            },
            tooltip: {
                show: false
            },

            data: [15, 20, 19, 16, 15, 14, 13,13, 12, 10, 12, 13, 14, 15,]
        }]
    };
    myChart.setOption(option);
}
//空气质量
function buildChart2() {
    var myChart = echarts.init(document.getElementById('air'));

    function getColor(val){
        if(val < 45){
            return colors[0]
        } else if( val >= 45 && val < 60){
            return colors[1]
        } else if( val >= 60 && val < 80){
            return colors[2]
        } else if( val >= 80 && val < 100){
            return colors[3]
        } else{
            return colors[4]
        }
    }
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            axisTick: {
                // show: false,
                color: '#707070'
            },
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            },

            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            data: ['01', '02', '03', '04', '05', '06','07', '08', '09', '10', '11', '12','13', '14', '15', '16', '17', '18','19', '20', '21', '22', '23', '24'],
        }],
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            },
            splitLine:{
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
            name: '空气质量',
            type: 'bar',
            barWidth: '60%',
            data: [
                {
                    name: '01',
                    value: '32',
                    itemStyle: {
                        color: getColor(32)
                    }
                },
                {
                    name: '02',
                    value: '34',
                    itemStyle: {
                        color: getColor(34)
                    }
                },
                {
                    name: '03',
                    value: '35',
                    itemStyle: {
                        color: getColor(36)
                    }
                },
                {
                    name: '04',
                    value: '38',
                    itemStyle: {
                        color: getColor(38)
                    }
                },
                {
                    name: '05',
                    value: '40',
                    itemStyle: {
                        color: getColor(40)
                    }
                },
                {
                    name: '06',
                    value: '42',
                    itemStyle: {
                        color: getColor(42)
                    }
                },
                {
                    name: '07',
                    value: '42',
                    itemStyle: {
                        color: getColor(42)
                    }
                },
                {
                    name: '08',
                    value: '44',
                    itemStyle: {
                        color: getColor(44)
                    }
                },
                {
                    name: '09',
                    value: '46',
                    itemStyle: {
                        color: getColor(46)
                    }
                },
                {
                    name: '10',
                    value: '48',
                    itemStyle: {
                        color: getColor(48)
                    }
                },
                {
                    name: '11',
                    value: '50',
                    itemStyle: {
                        color: getColor(50)
                    }
                },
                {
                    name: '12',
                    value: '52',
                    itemStyle: {
                        color: getColor(52)
                    }
                },
                {
                    name: '13',
                    value: '52',
                    itemStyle: {
                        color: getColor(52)
                    }
                },
                {
                    name: '14',
                    value: '54',
                    itemStyle: {
                        color: getColor(54)
                    }
                },
                {
                    name: '15',
                    value: '57',
                    itemStyle: {
                        color: getColor(57)
                    }
                },
                {
                    name: '16',
                    value: '58',
                    itemStyle: {
                        color: getColor(58)
                    }
                },
                {
                    name: '17',
                    value: '60',
                    itemStyle: {
                        color: getColor(60)
                    }
                },
                {
                    name: '18',
                    value: '62',
                    itemStyle: {
                        color: getColor(62)
                    }
                },
                {
                    name: '19',
                    value: '58',
                    itemStyle: {
                        color: getColor(58)
                    }
                },
                {
                    name: '20',
                    value: '54',
                    itemStyle: {
                        color: getColor(54)
                    }
                },
                {
                    name: '21',
                    value: '56',
                    itemStyle: {
                        color: getColor(56)
                    }
                },
                {
                    name: '22',
                    value: '48',
                    itemStyle: {
                        color: getColor(48)
                    }
                },
                {
                    name: '23',
                    value: '44',
                    itemStyle: {
                        color: getColor(44)
                    }
                },
                {
                    name: '24',
                    value: '42',
                    itemStyle: {
                        color: getColor(42)
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);
}
//温度
function buildChart3(){
    var myChart = echarts.init(document.getElementById('wendu'));
    option = {
        color:["#14c6ca","#fff000","#d88003","#820f09","#350407"],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter:"{b}时温度<br>{c}℃"
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            axisTick: {
                // show: false,
                color: '#707070'
            },
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            },

            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            data: ['01', '02', '03', '04', '05', '06','07', '08', '09', '10', '11', '12','13', '14', '15', '16', '17', '18','19', '20', '21', '22', '23', '24'],
        }],
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            },
            splitLine:{
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
            data: [12, 13, 14, 13, 14, 15, 17,18,19,20,20,22,24,23,20,19,16,16,15,14,14,14,12,11],
            type: 'line',
            smooth: true
        }]
    };
    myChart.setOption(option);
}
//湿度
function buildChart4(){
    var myChart = echarts.init(document.getElementById('moisture'));
    option = {
        color:["#14c6ca","#fff000","#d88003","#820f09","#350407"],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter:"{b}时相对湿度<br>{c}%"
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            axisTick: {
                // show: false,
                color: '#707070'
            },
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            },

            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            data: ['01', '02', '03', '04', '05', '06','07', '08', '09', '10', '11', '12','13', '14', '15', '16', '17', '18','19', '20', '21', '22', '23', '24'],
        }],
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            },
            splitLine:{
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
            data: [40, 60, 59, 56, 54, 52, 49,48,45,40,39,38,36,37,38,39,42,41,45,44,45,44,42,41],
            type: 'line',
            smooth: true
        }]
    };
    myChart.setOption(option);
}
//降水量
function buildChart5(){
    var myChart = echarts.init(document.getElementById('rain'));
    option = {
        color:["#14c6ca","#fff000","#d88003","#820f09","#350407"],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter:"{b}时降水量<br>{c}mm"
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            axisTick: {
                // show: false,
                color: '#707070'
            },
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            },

            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            data: ['01', '02', '03', '04', '05', '06','07', '08', '09', '10', '11', '12','13', '14', '15', '16', '17', '18','19', '20', '21', '22', '23', '24'],
        }],
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            },
            splitLine:{
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
            data: [0, 0, 0, 0, 0, 0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            type: 'line',
            smooth: true
        }]
    };
    myChart.setOption(option);
}
//风向
function buildChart6(){
    // 基于准备好的dom，初始化echarts实例
    var data = [
        [
            01,
            6.19,
            0.9545
        ],
        [
            02,
            6.19,
            0.2303
        ],
        [
            03,
            3.19,
            0
        ],
        [
            04,
            6.19,
            0
        ],
        [
            05,
            6.19,
            4
        ],
        [
            06,
            11.19,
            2
        ],
        [
            07,
            17.19,
            4.7124
        ],
        [
            08,
            6.19,
            0.9545
        ],
        [
            09,
            6.19,
            0.2303
        ],
        [
            10,
            3.19,
            0
        ],
        [
            11,
            6.19,
            0
        ],
        [
            12,
            6.19,
            4
        ],
        [
            13,
            11.19,
            2
        ],
        [
            14,
            17.19,
            4.7124
        ],
        [
            15,
            6.19,
            0.9545
        ],
        [
            16,
            6.19,
            0.2303
        ],
        [
            17,
            3.19,
            0
        ],
        [
            18,
            6.19,
            0
        ],
        [
            19,
            6.19,
            4
        ],
        [
            20,
            11.19,
            2
        ],
        [
            21,
            17.19,
            4.7124
        ],
        [
            22,
            11.19,
            2
        ],
        [
            23,
            17.19,
            4.7124
        ],
        [
            24,
            17.19,
            4.7124
        ]
    ];
    //数据参数顺序
    var dims = {
        time: 0,
        windSpeed: 1,
        R: 2
    };
    //箭头大小
    var arrowSize = 12;
    //方向绘制
    function renderArrow(param, api) {
        var point = api.coord([
            api.value(dims.time),
            api.value(dims.windSpeed)
        ]);

        return {
            type: 'path',
            shape: {
                pathData: 'M31 16l-15-15v9h-26v12h26v9z',
                x: -arrowSize / 2,
                y: -arrowSize / 2,
                width: arrowSize,
                height: arrowSize
            },
            rotation: api.value(dims.R),
            position: point,
            style: api.style({
                stroke: '#555',
                lineWidth: 1
            })
        };
    }
    var myChart = echarts.init(document.getElementById('fengli'));
    option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return [

                    '风速：' + params[0].value[dims.windSpeed],
                    '风向：' + params[0].value[dims.R]
                ].join('<br>');
            }
        },
        grid: {
            top: 40,
            bottom: 60
        },

        xAxis: {
            type: 'category',
            axisTick: {
                // show: false,
                color: '#707070'
            },
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            },

            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            data: ['01', '02', '03', '04', '05', '06','07', '08', '09', '10', '11', '12','13', '14', '15', '16', '17', '18','19', '20', '21', '22', '23', '24'],
        },
        yAxis: [{
            nameLocation: 'middle',
            nameGap: 35,
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            }
        }, {
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
        }],
        visualMap: {
            type: 'piecewise',
            orient: 'horizontal',
            left: 'center',
            bottom: 10,
            pieces: [{
                gte: 17,
                color: '#D33C3E',
                label: '大风（>=17节）'
            }, {
                gte: 11,
                lt: 17,
                color: '#f4e9a3',
                label: '中风（11  ~ 17 节）'
            }, {
                lt: 11,
                color: '#18BF12',
                label: '微风（小于 11 节）'
            }],
            seriesIndex: 0,
            dimension: 1,
            textStyle: {
                color:"#FFF"
            }
        },
        dataZoom: [{
            type: 'inside',
            xAxisIndex: 0,
            minSpan: 5
        }],
        series: [{
            type: 'custom',
            renderItem: renderArrow,
            encode: {
                x: dims.time,
                y: dims.windSpeed
            },
            data: data,
            z: 10
        }, {
            type: 'line',
            symbol: 'none',
            encode: {
                x: dims.time,
                y: dims.windSpeed
            },
            lineStyle: {
                normal: {
                    color: '#aaa',
                    type: 'dotted'
                }
            },
            data: data,
            z: 1
        }]
    };

    myChart.setOption(option);
}

buildChart6()
buildChart1()
buildChart2()
buildChart3()
buildChart4()
buildChart5()
buildChart6()
// $(".right-down .title-box ul li").click(function(){
//     let _index = $(this).index()
//     console.log(_index,12)
//     $(this).addClass('active').siblings().removeClass('active')
//     $('.right-down .echarts-list li').eq(_index).addClass('active').siblings().removeClass('active')
//     var optId = $(".right-down .echarts-list li").eq(_index).find('div').attr("id")
//     var chart = echarts.init(document.getElementById(optId));
//         // 手动初始化图表
//         chart.resize()
// })
$(".right-down .content-title ul li").click(function(){
    let _index = $(this).index()
    console.log(_index,12)
    $(this).addClass('active').siblings().removeClass('active')
    $('.right-down .echarts-list li').eq(_index).removeClass('chart-hd').siblings().addClass('chart-hd')
    // var optId = $(".right-down .echarts-list li").eq(_index).find('div').attr("id")
    var optId = $(".right-down .echarts-list li").eq(_index).attr("id")
    var chart = echarts.init(document.getElementById(optId));
    // 手动初始化图表
    chart.resize()
})
